<template>
	<view class="reply_super_content app_content_color">
		<emoji-view v-if="showEmoji" v-on:emojiTap="emojiTap"></emoji-view>
		<view class="reply_content">
			<view class="reply_input_content app_background_color">
				<textarea class="reply_input app_title_color" :focus="focus" @focus="focused" @blur="blured" :placeholder="placeholder"
					@input="replyInput" confirm-type="send" @confirm="sendButtonTap" :value="replyText" auto-height :show-confirm-bar="false"/>
			</view>
			<image class="reply_emoji_button" mode="aspectFit" src="../static/emoji_icon.png" @tap="showEmojiTap"></image>
			<view class="reply_button_content" @tap="sendButtonTap">
				<view>发送</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		name: "reply-input-view",
		props:{
			placeholder:{
				type:String,
				default:"点击回复"
			},
			replyText:{
				type:String,
				default:""
			},
			focus:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				showEmoji:false
			};
		},
		methods:{
			sendButtonTap(){
				this.$emit('sendButtonTap',this.replyText)
				this.showEmoji = false
			},
			replyInput(e) {
				this.$emit('replyInput',e.detail.value)
			},
			focused() {
				this.showEmoji = false
			},
			blured() {
				if(this.showEmoji){
					return
				}
				this.$emit('blured')
			},
			showEmojiTap(){
				this.showEmoji = !this.showEmoji
			},
			emojiTap(item){
				this.$emit('replyInput',this.replyText+item.alt)
			}
		}
	}
</script>

<style lang="scss">
	.reply_super_content {
		display: flex;
		flex-direction: column;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		border-top: 1upx solid #aaaaaa;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.reply_content {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.reply_input_content {
		display: flex;
		margin-top: 20upx;
		margin-left: 30upx;
		margin-bottom: 20upx;
		flex-grow: 1;
		padding-top: 10upx;
		padding-bottom: 10upx;
	}

	.reply_input {
		font-size: 30upx;
		margin-left: 20upx;
		width: 100%;
		margin-right: 20upx;
		min-height: 40upx;
	}

	.reply_button_content {
		display: flex;
		background-color: $uni-global-green-color;
		align-items: center;
		justify-content: center;
		border-radius: 4upx;
		margin-top: 20upx;
		margin-bottom: 20upx;
		margin-left: 30upx;
		margin-right: 20upx;
		padding-left: 30upx;
		padding-right: 30upx;
		color: #fff;
		font-size: 24upx;
		height: 60upx;
	}
	
	.reply_emoji_button {
		margin-top: 20upx;
		margin-bottom: 20upx;
		margin-left: 30upx;
		width: 60upx;
		height: 60upx;
	}
</style>
